
<template>
  <el-card shadow="never">
    <div class="qy-title">
      <strong>区域分布</strong>
    </div>
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="en-header">
          <div class="en-title">技改项目分布</div>
          <div class="en-echarts">
            <distribution-chart :tableData="projectData" :colors=" ['#6395fa', '#63daab',]"></distribution-chart>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="en-header">
          <div class="en-title">制造业分布图</div>
          <div class="en-echarts">
            <distribution-chart :tableData="manufacturingData" :colors="[ '#657798', '#f7c12d', ]"></distribution-chart>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="en-header">
          <div class="en-title">智能制造项目分布</div>
          <div class="en-echarts">
            <distribution-chart :tableData="intelligentManufacturingData"
                                :colors="['#867bf1', '#76cbed']"></distribution-chart>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="en-header">
              <div class="en-title">项目竣工趋势</div>
              <div class="en-echarts">
                <completion-trend-chart></completion-trend-chart>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="en-header">
              <div class="en-title">项目总投资额分布</div>
              <div class="en-echarts">
                <asset-distribution-chart></asset-distribution-chart>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
  <br>
  <el-card shadow="never">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="qy-title">
          <strong>“低散乱”企业治理</strong>
        </div>
        <div class="en-tao">
          <div class="en-tao-title">完成情况</div>
          <div style="padding:0 10px;font-size: 14px;color: #666666">
            <div style="display: flex;justify-content: space-between">
              <div><strong style="font-size: 18px;color:#77c865;padding-left: 10px ">194</strong>/ <span>150</span>
              </div>
              <div>完成数/总任务数</div>
            </div>
            <div style="padding: 10px">
              <el-progress :percentage="50" :indeterminate="true" color="#77c865" stroke-width="10" :show-text="false"/>
            </div>
          </div>
          <div class="en-box">
            <div style="display: flex;align-items: center">
              <el-image :src="utils.getAssetsFile('bjj.png')"></el-image>
              <div style="margin-left: 20px;font-size: 14px">
                <strong style="font-size: 18px">129.30%</strong>
                <br>
                <small>完成率</small>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="en-tao" style="margin-top: 42px">
          <distribution-chart :tableData="substituteScatteredData"
                              :colors="[ '#2167fa', '#73deb3','#9bc5ff','#ff943d' ]"></distribution-chart>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="qy-title">
          <strong>“淘汰落后产能</strong>
        </div>
        <div class="en-tao">
          <div class="en-tao-title">完成情况</div>
          <div style="padding:0 10px;font-size: 14px;color: #666666">
            <div style="display: flex;justify-content: space-between">
              <div><strong style="font-size: 18px;color:#77c865;padding-left: 10px ">35</strong>/ <span>32</span>
              </div>
              <div>完成数/总任务数</div>
            </div>
            <div style="padding: 10px">
              <el-progress :percentage="50" :indeterminate="true" color="#77c865" stroke-width="10" :show-text="false"/>
            </div>
          </div>
          <div class="en-box">
            <div style="display: flex;align-items: center">
              <el-image :src="utils.getAssetsFile('bjj.png')"></el-image>
              <div style="margin-left: 20px;font-size: 14px">
                <strong style="font-size: 18px">109.40%</strong>
                <br>
                <small>完成率</small>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="en-tao" style="margin-top: 42px">
          <distribution-chart :tableData="outdatedProductionCapacityData"
                              :colors="[ '#2167fa', '#73deb3','#9bc5ff','#ff943d','#5d72fb','#ff7051' ]"></distribution-chart>
        </div>
      </el-col>
    </el-row>
    <br>
    <div class="qy-title">
      <strong>“低效高耗”企业整治</strong>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="en-tao">
          <div class="en-tao-title">整治效果</div>
          <ul class="en-dx">
            <template v-for="item in inefficientData">
              <li>
                <div>{{ item.name }}</div>
                <div><strong>{{ item.value }}</strong> <small>{{ item.unit }}</small></div>
              </li>
            </template>
          </ul>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="en-tao">
          <div class="en-tao-title">整治原因分布</div>
          <div style="height: 260px">
            <distribution-chart :tableData="rectificationReasonsData"
                                :colors="[ '#2167fa', '#73deb3','#9bc5ff','#ff943d','#5d72fb','#ff7051' ]"></distribution-chart>
          </div>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="en-tao">
          <div class="en-tao-title">整治类型分布</div>
          <div style="height: 260px">
            <distribution-chart :tableData="rectificationTypeData"
                                :colors="[ '#2167fa', '#73deb3','#9bc5ff','#ff943d','#5d72fb','#ff7051' ]"></distribution-chart>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>


</template>


<script setup>
import DistributionChart from "@/views/enterpriseCultivation/Echarts/DistributionChart.vue";
import {reactive} from "vue";
import CompletionTrendChart from "@/views/enterpriseCultivation/Echarts/CompletionTrendChart.vue";
import AssetDistributionChart from "@/views/enterpriseCultivation/Echarts/AssetDistributionChart.vue";
import utils from "@/utils/index.js";

const rectificationTypeData = reactive([
  {
    name:'关停退出',
    value:49
  },
  {
    name:'整治提升/改造提升',
    value:140
  },
  {
    name:'整治提升/回收盘活',
    value:2
  },
])

const rectificationReasonsData = reactive([
  {
    name:'低效',
    value:187
  },
  {
    name:'高耗',
    value:4
  }
])

const inefficientData = reactive([
  {
    name: '销号企业',
    value: 191,
    unit: '家'
  },
  {
    name: '腾出用地',
    value: 1977.08,
    unit: '亩'
  },
  {
    name: '收储拆迁',
    value: 20.28,
    unit: '亩'
  },
  {
    name: '土地流转',
    value: 149.70,
    unit: '亩'
  },
  {
    name: '土地增效',
    value: 1807.10,
    unit: '亩'
  },
  {
    name: '腾出用能',
    value: 16103.98,
    unit: '吨标准煤'
  }
])

const projectData = reactive([
  {
    name: '技改',
    value: 10
  },
  {
    name: "新建",
    value: 20
  }
])
const manufacturingData = reactive([
  {
    name: '制造业',
    value: 255
  },
  {
    name: "非制造业",
    value: 295
  }
])
const intelligentManufacturingData = reactive([
  {
    name: '智能制造业',
    value: 0
  },
  {
    name: "非智能制造业",
    value: 295
  }
])

const substituteScatteredData = reactive([
  {
    name: '改造提升',
    value: 100
  },
  {
    name: "整合入园",
    value: 2
  },
  {
    name: '合理转移',
    value: 158
  },
  {
    name: "关停淘汰",
    value: 34
  }
])

const outdatedProductionCapacityData = reactive([
  {
    name: '国家明令淘汰',
    value: 8
  },
  {
    name: "能耗不达票",
    value: 2
  },
  {
    name: '环保不达标',
    value: 5
  },
  {
    name: "质量不达标",
    value: 2
  },
  {
    name: '安全不达标',
    value: 8
  },
  {
    name: "结构调整退出",
    value: 18
  }
])
</script>

<style scoped lang="scss">
.qy-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  > strong {
    font-size: 16px;
    border-left: 4px solid #1e87f0;
    padding-left: 10px;
  }
}

.en-header {
  height: 310px;

  .en-title {
    height: 20px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .en-echarts {
    height: calc(100% - 30px);
  }
}

.en-tao {
  height: 300px;
}

.en-tao-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.en-box {
  margin: 10px 20px;
  height: 180px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  background-image: url("@/assets/images/bj.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep {
  .el-progress-bar__outer {
    background-color: #a5e897;
  }
}

.en-dx {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  > li {
    width: calc(50% - 20px);
    margin-bottom: 10px;
    padding: 25px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f4f5f8;
  }
}
</style>
